<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>添加</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/art-template/4.13.2/lib/template-web.js"></script>
</head>

<body>
  <h2>添加图书</h2>
  <form>
    <!-- 都加上id -->
    书名: <input type="text" name="name" id="name"><br />
    作者: <input type="text" name="author" id="author"><br />
    价格: <input type="number" name="price" id="price"><br />
    <input type="submit" value="提交" id="btn">
  </form>

  <script>
    const btn = document.querySelector('#btn')

    btn.onclick = async (e) => {
      // 阻止事件默认行为  不允许表单提交
      e.preventDefault()

      // 获取数据 注意一定加上 value
      const name = document.querySelector('#name').value
      const author = document.querySelector('#author').value
      const price = document.querySelector('#price').value

      // 提交添加图书的请求
      await axios({
        url: 'http://localhost:8080/book',
        method: 'post',
        // 传递body参数
        data: {
          name,
          author,
          price
        }
      })
      window.location = '/client/books.html'
    }
  </script>
</body>

</html>